<div class="my-6 w-full overflow-y-auto">
	<table class="w-full">
		<thead>
			<tr class="even:bg-muted m-0 border-t p-0">
				<th
					class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
				>
					King's Treasury
				</th>
				<th
					class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
				>
					People's happiness
				</th>
			</tr>
		</thead>
		<tbody>
			<tr class="even:bg-muted m-0 border-t p-0">
				<td
					class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
				>
					Empty
				</td>
				<td
					class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
				>
					Overflowing
				</td>
			</tr>
			<tr class="even:bg-muted m-0 border-t p-0">
				<td
					class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
				>
					Modest
				</td>
				<td
					class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
				>
					Satisfied
				</td>
			</tr>
			<tr class="even:bg-muted m-0 border-t p-0">
				<td
					class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
				>
					Full
				</td>
				<td
					class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
				>
					Ecstatic
				</td>
			</tr>
		</tbody>
	</table>
</div>
